@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg text-base font-medium transition-all duration-200;
  }

  .btn-primary {
    @apply btn bg-primary text-white shadow-md hover:bg-primary-dark active:transform active:translate-y-0.5;
  }

  .btn-secondary {
    @apply btn bg-gray-100 text-gray-700 border border-gray-200 hover:bg-gray-200;
  }

  .card {
    @apply bg-white rounded-2xl p-5 shadow-sm mb-4;
  }

  .form-input {
    @apply w-full px-4 py-2 rounded-lg bg-gray-50 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary text-base;
  }

  .status-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-sm font-medium;
  }
}
